<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                >

    <f:subview id="cadastroObjetivoEmbutido" rendered="#{fluxoExibicaoCadastro.exibirCadastroObjetivo}">
        <h:panelGrid columns="1" styleClass="center" >
            <h:panelGroup id="groupCadObjetivo" styleClass="esquerda">
                <h:form id="cadObjetivoForm" styleClass="formularioFundo">
                    <h:panelGrid columns="3" styleClass="bvb-font">
                        <f:facet name="header">
                            <h:outputText value="#{msg.cadObjetivoPanelGridTitle}" styleClass="formularioTitle"/>
                        </f:facet>
                        
                        <h:outputLabel value="#{msg.certificacao}:" id="labelCertificacao" title="#{msg.titleCertificacaoObjetivo}"/>
                        <h:selectOneMenu value="#{objetivoCertificacaoManager.objetivoCertificacao.certificacao}" id="selectCertificacao"
                                         required="true" label="#{msg.certificacao}"
                                         requiredMessage="#{msg.campoObrigatorio}">
                            <f:selectItem itemLabel="#{msg.selecione}" itemValue=""/>
                            <f:selectItems value="#{objetivoCertificacaoManager.certificacoes}"/>
                            <f:converter converterId="certificacaoConverter"/>
                        </h:selectOneMenu>
                        <p:message for="selectCertificacao"/>
                        
                        <h:outputLabel value="#{msg.objetivoCertificacao}:" id="labelObjetivoCertificacao"
                                       title="#{msg.titleObjetivoCertificacao}"/>
                        <p:inputText value="#{objetivoCertificacaoManager.objetivoCertificacao.objetivo}"
                                     id="inputObjetivoCertificacao" required="true"
                                     size="70" requiredMessage="#{msg.campoObrigatorio}"
                                     title="#{msg.titleObjetivoCertificacao}"
                                     label="#{msg.objetivoCertificacao}"
                                     onkeyup="Contar(this.value, 'promsg', 150)">
                            <f:validateLength minimum="5" maximum="150"/>
                        </p:inputText>
                        <h:panelGroup>
                            <span id="promsg"></span><br></br>
                            <p:message for="inputObjetivoCertificacao"/>
                        </h:panelGroup>

                        <h:outputLabel value="#{msg.detalhe}:" id="labelObservacao"
                                       title="#{msg.titleDetalheObjetivo}"/>
                        <p:inputTextarea value="#{objetivoCertificacaoManager.objetivoCertificacao.detalhe}"
                                         cols="80" rows="4" id="inputObservacao"
                                         title="#{msg.titleDetalheObjetivo}"
                                         label="#{msg.detalhe}" onkeyup="Contar(this.value, 'obsmsg', 2000)">
                            <f:validateLength maximum="2000"/>
                        </p:inputTextarea>
                        <h:panelGroup>
                            <span id="obsmsg"></span><br></br>
                            <p:message for="inputObservacao"/>
                        </h:panelGroup>

                        <h:outputText value=""/>
                        <h:panelGroup>
                            <p:commandLink actionListener="#{objetivoCertificacaoManager.cadastrarObjetivo()}" update="conteudoCentralGroup,messages"
                                           id="buttonSalvar" styleClass="ui-button_link" title="#{msg.titleDetalheObjetivo}">
                                <h:graphicImage library="img" name="bt_salvar.png"/>
                            </p:commandLink>
                            <p:spacer width="2" height="2"/>
                            <h:commandButton  title="#{msg.titleButtonCleanCadUser2}" immediate="true" image="/resources/img/bt_limpar_red.png"
                                              id="buttonLimpar"  actionListener="#{objetivoCertificacaoManager.clean()}">
                                <f:ajax render="cadObjetivoForm"></f:ajax>
                            </h:commandButton>
                        </h:panelGroup>

                    </h:panelGrid>
                </h:form>
            </h:panelGroup>

            <h:panelGroup id="spacers" styleClass="center">
                <p:spacer width="100%" height="5"/>
                <p:spacer width="100%" height="5"/>
            </h:panelGroup>

            <h:panelGroup id="objetivosGroup">
                <h:form id="formTableGroups">
                    <p:dataTable value="#{objetivoCertificacaoManager.modelObjetivos}" var="objetivos"
                                 id="tableObjetivos" rows="5" paginator="true"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                                 {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" styleClass="bvb-font"
                                 rowsPerPageTemplate="5,10,15" emptyMessage="#{msg.semRegistrosEcontrados}">
                        <f:facet name="header">
                            <h:outputText value="#{msg.richTableObjetivos}"/>
                        </f:facet>
                        
                        <p:column id="col1" filterBy="#{objetivos.id}"  headerText="Model" footerText="contains"
                                  filterMatchMode="contains" styleClass="center">
                            <f:facet name="header">
                                <h:outputText value="#{msg.richColumnId}"/>
                            </f:facet>
                            <h:outputText value="#{objetivos.id}"/>
                        </p:column>
                        
                        <p:column id="col2" filterBy="#{objetivos.objetivo}"  headerText="Model" footerText="contains"
                                  filterMatchMode="contains">
                            <f:facet name="header">
                                <h:outputText value="#{msg.richColumnObjetivo}"/>
                            </f:facet>
                            <h:outputText value="#{objetivos.objetivo}"/>
                        </p:column>
                        
                        <p:column id="col3" filterBy="#{objetivos.detalhe}" headerText="Model" footerText="contains"
                                  filterMatchMode="contains">
                            <f:facet name="header">
                                <h:outputText value="#{msg.richColumnDetalhe}"/>
                            </f:facet>
                            <h:inputTextarea cols="25" rows="3" disabled="true" value="#{objetivos.detalhe}" style="font-size: 10px;"/>
                        </p:column>
                        
                        <p:column id="col6" styleClass="center" filterBy="#{objetivos.certificacao.nome}" headerText="Model" footerText="contains"
                                  filterMatchMode="contains">
                            <f:facet name="header">
                                <h:outputText value="#{msg.richColumnCertificacao}"/>
                            </f:facet>
                            <h:outputText value="#{objetivos.certificacao.nome}"/>
                        </p:column>
                        
                         <p:column id="editarObjetivo" styleClass="center">
                            <f:facet name="header">
                                <h:outputText value="#{msg.richColumnEditar}"/>
                            </f:facet>
                            <p:commandLink update="conteudoCentralGroup,messages" title="#{msg.titlebuttonEditarObjetivo}" 
                                           id="buttonEditar" styleClass="ui-button_link">
                                <h:graphicImage library="img" name="objetivo_edit_24.png"/>
                                <f:setPropertyActionListener value="#{objetivos}" target="#{objetivoCertificacaoManager.objetivoCertificacao}" />  
                            </p:commandLink>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </h:panelGroup>

        </h:panelGrid>
    </f:subview>
</ui:composition>
